<template>
    <el-card shadow="never" style="max-height: 700px; overflow: auto">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
            <el-form-item label="id:" prop="id" v-show="false">
                <el-input v-model="form.id" disabled />
            </el-form-item>
            <el-form-item
                v-for="(accoun, index) in form.color"
                :label="'Color' + index"
                :key="index"
                :prop="'account.' + index + '.value'"
                :rules="{
                required: true, message: 'Color不能为空', trigger: 'blur'
                }"
            >
                <el-row>
                    <el-col :span="8">
                        <el-input clearable placeholder="请输入英文" v-model="accoun.yingwen"></el-input>
                    </el-col>
                    <el-col :span="8">
                        <el-input clearable placeholder="请输入中文" v-model="accoun.zhongwen"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="danger" @click.prevent="removeAccount1(accoun)">删除</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button @click="addAccount1">新增Color</el-button>
            </el-form-item>
            <el-form-item
                v-for="(accoun, index) in form.size"
                :label="'Size' + index"
                :key="index"
                :prop="'account.' + index + '.value'"
                :rules="{
                required: true, message: 'Size不能为空', trigger: 'blur'
                }"
            >
                <el-row>
                    <el-col :span="8">
                        <el-input clearable placeholder="请输入英文" v-model="accoun.yingwen"></el-input>
                    </el-col>
                    <el-col :span="8">
                        <el-input clearable placeholder="请输入中文" v-model="accoun.zhongwen"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="danger" @click.prevent="removeAccount2(accoun)">删除</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button @click="addAccount2">新增Size</el-button>
            </el-form-item>
            <el-form-item
                v-for="(accoun, index) in form.cup"
                :label="'Cup' + index"
                :key="index"
                :prop="'account.' + index + '.value'"
                :rules="{
                required: true, message: 'Cup不能为空', trigger: 'blur'
                }"
            >
                <el-row>
                    <el-col :span="8">
                        <el-input clearable placeholder="请输入英文" v-model="accoun.yingwen"></el-input>
                    </el-col>
                    <el-col :span="8">
                        <el-input clearable placeholder="请输入中文" v-model="accoun.zhongwen"></el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="danger" @click.prevent="removeAccount3(accoun)">删除</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-button @click="addAccount3">新增Cup</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">添加</el-button>
                <el-button type="warning" @click="cancel">取消 </el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
export default {
    name: 'EditSkuaddForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
        
    },
    data() {
        return {
            rules: {},
            form: {
                color: [
                    {
                        yingwen: '',
                        zhongwen: '',
                    },
                ],
                cup: [
                    {
                        yingwen: '',
                        zhongwen: '',
                    },
                ],
                size: [
                    {
                        yingwen: '',
                        zhongwen: '',
                    },
                ],
                id:0,
            },
            api: {
                skumanage: `/admin/product.info/skumanage`,
            },
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    // this.$nextTick(() => {
                        this.form.id = nval.id
                        console.log('testthis.form',this.form);
                        
                    // })
                }
            },
            immediate: true,
            deep: false,
        },
        
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editSkuaddFormCancel')
        },

        submitForm() {
            this.$emit('submitSkuaddForm', this.form)
        },
        // 表单重置
        reset() {
            this.resetForm('form')
        },
        removeAccount1(item) {
            var index = this.form.color.indexOf(item)
            if (index !== -1) {
                this.form.color.splice(index, 1)
            }
        },
        addAccount1() {
            this.form.color.push({
                yingwen: '',
                zhongwen: '',
            });
        },
        removeAccount2(item) {
            var index = this.form.size.indexOf(item)
            if (index !== -1) {
            this.form.size.splice(index, 1)
            }
        },
        addAccount2() {
            this.form.size.push({
                yingwen: '',
                zhongwen: '',
            });
        },
        removeAccount3(item) {
            var index = this.form.cup.indexOf(item)
            if (index !== -1) {
            this.form.cup.splice(index, 1)
            }
        },
        addAccount3() {
            this.form.cup.push({
                yingwen: '',
                zhongwen: '',
            });
        },
    },
}
</script>
